<template>
  <a-card :bordered="false">
    <!-- 改成menu形式 -->
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider style="background: #fff;border-right: 1px solid #e8e8e8;" width="230px">
        <a-menu :default-selected-keys="[0]" mode="inline" @click="menuClick">
          <a-menu-item :key="index" v-for="(item, index) in siderList">
            <span :title="item">{{ item }}</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <component ref="componentRef" :is="componentTag" @ok="handleOk"></component> 
      </a-layout>
    </a-layout>
  </a-card>
</template>

<script>
  import LogisticsChannelListComponent from './LogisticsChannelListComponent.vue'
  import { getAction } from '@/api/manage'

  export default {
    name: "LogisticsChannelList",
    components: {
      LogisticsChannelListComponent
    },
    data () {
      return {
        description: '物流渠道',
        componentTag: 'LogisticsChannelListComponent',
        url: {
          queryGroupCount: "/logistics/channel/queryGroupCount"
        },
        siderList: [],
        logisticsList: []
      }
    },
    mounted(){
      this.getQueryGroupCount();
    },
    methods: {
      getQueryGroupCount(){
        getAction(this.url.queryGroupCount).then((res) => {
          if(res.success){
            this.logisticsList = res.result || [];
            let result = res.result && res.result.map(item => {
              return `${item.providerName}（${item.channelCount}）`;
            })
            let total = res.result && res.result.reduce((prev, cur) => {
              return +prev + +cur.channelCount;
            }, 0)
            if(total){
              result.unshift(`全部（${total}）`);
            }
            this.siderList = result;
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {
          //初始化无数据
          if(!(this.siderList && this.siderList.length)){
            this.siderList = ['全部（0）']
          }
        })
      },
      menuClick({ key }){
        let providerId = '';
        if(key != 0){
          key = key - 1;
          providerId = (this.logisticsList && this.logisticsList[key] && this.logisticsList[key].providerId) || '';
        }
        if(this.$refs.componentRef){
          this.$refs.componentRef.changeProviderId(providerId);
        }
      },
      handleOk(){
        this.getQueryGroupCount();
      }
    }
  }
</script>

<style lang="less" scoped>
.ant-menu-inline{
  border-right: none;
}
</style>